<template>
  <div>
    <el-row>
      <el-col>
        <div id="Perception" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  echarts.dataTool = require("echarts/extension/dataTool");
  export default {
    data() {
      return {
        isShow: false,
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('Perception'));
/*        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: 'rgba(0, 76, 152, .6)',
            borderColor: '#035699',
            borderWidth: 1,
          },
          grid: {
            left: '3%',
            right: '3%',
            bottom: '5%',
            top: '12%',
            containLabel: true
          },
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          xAxis: [{
            type: 'category',
            data: ['糖尿病诊断与分型', '糖尿病初诊用药', '糖尿病长期管理', '糖尿病并发症管理'],
            axisTick: {
              alignWithLabel: true
            },
            /!*坐标颜色*!/
            axisLine: {
              lineStyle: {
                color: '#2faef5',
                width: 2
              }
            }
          }],
          yAxis: [{
            type: 'value',
            /!*坐标颜色*!/
            axisLine: {
              lineStyle: {
                color: '#2faef5',
                width: 2
              }
            },
            /!*网络线*!/
            splitLine: {

              show: true,

              lineStyle: {

                color: '#483d8b',

                type: 'dashed',

                width: 1

              }

            }
          }],
          series: [{
            name: '',
            type: 'bar',
            color: ['#04a5f9'],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top'
                },
                /!*柱状渐变*!/
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, [{
                    offset: 0,
                    color: '#9dcb7e'
                  },
                    {
                      offset: 0.5,
                      color: '#9dcb7e'
                    },
                    {
                      offset: 1,
                      color: '#008099'
                    }
                  ]
                )
              }
            },
            barWidth: '20%',
            data: [65, 55, 100, 30]
          }]
        };*/

                var data1 = echarts.dataTool.prepareBoxplotData([
                  [3,9],[3,8],[1,9],[4,7]
                ]);
                var option = {
                  title: [
                    {
                      text: '',
                      left: 'center',
                    },
                  ],
                  legend: {
                    data: ['line', 'line2', 'line3']
                  },
                  tooltip: {
                    trigger: 'item',
                    axisPointer: {
                      type: 'shadow'
                    }
                  },
                  grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '15%'
                  },
                  xAxis: {
                    type: 'category',
                    data: ['糖尿病诊断', '高血脂', '基础胰岛素', '预混胰岛素'],
                    boundaryGap: true,
                    nameGap: 30,
                    splitArea: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    }
                  },
                  yAxis: {
                    splitArea: {
                      show: true
                    }
                  },
                  series: [
                    {
                      name: 'boxplot',
                      type: 'boxplot',
                      data: data1.boxData,
                    },
                    {
                      name: '糖尿病诊断与分型',
                      type: 'scatter',
                      data: [
                        [0, 8.2, "糖尿病诊断与分型"],
                      ],
                    },
                    {
                      name: '高血脂',
                      type: 'scatter',
                      data: [
                        [1, 8, "高血脂"],
                      ],
                    },
                    {
                      name: '基础胰岛素',
                      type: 'scatter',
                      data: [
                        [2, 6, "基础胰岛素"],
                      ],
                    },
                    {
                      name: '预混胰岛素',
                      type: 'scatter',
                      data: [
                        [3, 7, "预混胰岛素"],
                      ],
                    }
                  ]
                };

        myChart.setOption(option);

      }
    }
  }
</script>

<style scoped>

</style>
